性能优化 - 纯组件
import { PureComponent, useState } from 'react'

class Test extends PureComponent {}

注意: 纯组件再帮我们比较数据的时候是浅层对比,
  所以如果是复杂数据类型,
  我们一般都会根据旧数据,
  创建新数据,
  然后修改新数据,
  最后用新数据赋值

高阶组件
作用: 将多个组件中重复的状态和逻辑定义在一个公共的父组件中

实现: ```js
export default function withXXX(WrappedComponent){
    return class extends React.Component{
        static displayName = '自定义的名字'
        定义state和逻辑

        render(){
            return <WrappedComponent {...this.state} {...this.props}></WrappedComponent>
        }
    }
}

```

renderprops
作用: 将多个组件中重复的状态和逻辑定义在一个公共的父组件中

实现: ```js

class Far extends React.Component {
    定义公共的状态和逻辑

    render(){
        return this.props.render(状态)
    }
}

<Far render={(state)=>{
    return <子组件 {...state}></子组件>
}}></Far>


```

Hook

作用: 就是在函数组件中实现和类组件相同的功能

useState
作用: 在函数组件中定义状态
使用: ```js
import {useState} from 'react'

function Test(){
    const [数据, 修改数据的方法] = useState(初始值)
    return jsx
}
注意: useState已经帮我们处理了组件的性能优化问题

```

useEffect

作用: 在函数组件中模拟三个生命周期钩子: 挂载, 更新, 卸载

实现: ```js

import {useEffect} from 'react'
// useEffect第二个参数不写: 外层模拟了挂载和更新, 内层的模拟了卸载 
// useEffect第二个参数空数组: 外层模拟挂载,内层模拟卸载
// useEffect第二个参数数组监视了数据: 监视的数据发生变化,外层就模拟更新,否则不模拟
function Test(){
    useEffect(()=>{
        return ()=>{

        }
    }, 数组)
    return jsx
}



```
